<!DOCTYPE html>
<html>
<head lang="cn-ZH">
    <meta charset="UTF-8">
    <link rel="SHORTCUT ICON" href="../img/logo/ico-B.ico">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/common.css">
    <title>WEB1802注册页</title>
</head>
<body>
<div class="container" id="Vue">
    <div style="width: 350px;padding:20px 0;margin:auto ;background: #e3efff;border-radius: 20px ">
        <div style="width:250px;margin: auto ;">
            <h2 class="text-center"><a href="../../index.html" title="返回首页"><img src="../img/logo/TangSH-B.png" width="100" alt=""></a>注册页</h2>
            <form  class="form-horizontal ">
                <div class="">
                    <div class="">
                        <input type="text" class="form-control" name="user_name" v-model="user_name" @blur="check_uname" autofocus placeholder="用户名"/>
                    </div>
                    <span class="help-block" id="name_message"><!--6~12位数字字母下划线--></span>
                </div>
                <div class="">
                    <div class="">
                        <input type="password" class="form-control" name="user_pwd" placeholder="密码"/>
                    </div>
                    <span class="help-block"><!--6~12位数字或字母--></span>
                </div>
                <div class="">
                    <div class="">
                        <input type="text" class="form-control" name="user_qq" placeholder="QQ"/>
                    </div>
                    <span class="help-block"></span>
                </div>
                <div class="">
                    <div class="" id="yzm" @click="loadyam" style="height:40px;">
                        <img src="../php/yzm.php" alt="验证码" >看不清?点击换一张
                    </div>
                    <input type="text" class="form-control" name="yzm" v-model="yzm" placeholder="四位小写字母或数字" />
                </div>
                <div class=" ">
                    <div class="checkbox">
                        <label><input type="checkbox" v-model="consent">是否同意本站注册协议</label><br>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-6">
                            <input type="button" class="form-control btn-success" :disabled="!consent" @click="submit" value="提交"/>
                        </div>
                        <div class="col-xs-6">
                            <input type="reset" class="form-control btn-danger"/>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--页脚加载-->
<div class="my-footer">Copyright&copy;web1802</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!--发送验证码-->
<script>
    new Vue({
        el:"#Vue",
        data:{
            rememberPwd:0,//记住密码
            autoLogin:0,//自动登陆
            consent:false,//同意注册协议
            user_name:"",
            yzm:"",
            yzmOk:false,

        },
        methods:{
            //检查用户名
            check_uname:function(){
                console.log(this.user_name);
                $.get("../php/check_uname.php",{user_name:this.user_name}, function(res){
                    res=JSON.parse(res);
                    if (res.code===-1){
                        $("#name_message").html(res.msg).addClass("bg-danger");
                    }else{
                        $("#name_message").html(res.msg).addClass("bg-success").removeClass("bg-danger");
                    }
                })
            },
            //加载验证码
            loadyam:function(){
                $("#yzm>img").attr("src","../php/yzm.php")
            },
            //注册请求php
            submit:function(){
                //此处应提前验证
                if(this.yzm==""){
                    this.yzmOk=true;
                    alert("请输入验证码") ;
                    return;
                }
                var data= $("form").serialize();//表单序列化
                $.ajax({
                    type:"POST",
                    url:'../php/register.php',
                    data:data,
                    dataType:"json",
                    success:function(res){
                        res=JSON.parse(res);
                        if(res.code==1){alert(res.msg)}else{alert(res.msg)}
                    },
                    error:function(){alert("网络不好")}
                })
            },
        },
    })
</script>
</body>
</html>